<template>
  <div class="course-container">

    <div class="header-box" style="display:flex;justify-content: flex-start">
      <div class="sfq">
        <Checkbox v-model="accordion" size="large">手风琴</Checkbox>
      </div>
      <div class="open-box" @click="openCloseChange">
        <Icon type="md-reorder" size="large" :size="30" :class="{open:!openFlag,close:openFlag}"/>
        <div v-if="!openFlag" class="o-text">展开</div>
        <div v-if="openFlag" class="o-text">收缩</div>
      </div>
      <div style="margin-left: 10px" @click="orderChapter">
        <IconAli :sty="{width:'40px',height:'40px',margin:'-2px 0px 0px 0px'}" icon='order-1'></IconAli>
      </div>
      <div @click="addChapter">
        <IconAli :sty="{width:'32px',height:'32px',marginRight:'32px'}" icon='add'></IconAli>
      </div>
    </div>

    <!--折叠面板-->
    <Collapse v-model="collapseChapterArr"
              :accordion="accordion"
              :mask-closable="false"
              closable
              :scrollable="false">
      <Panel :name="obj.chapterId" v-for="(obj,i) in chapterList" :key="obj.chapterId">
        <div class="chapter-header">

          <div class="title">
            <div>第 {{ i + 1 }} 章</div>
            <div :class="{'h-title':true,'del-style':obj.status==0}">{{ obj.chapterName }}</div>
            <div style="margin-left: 30px;color: #F00"
                 v-if="obj.status==0">
              【当前课程已经下线】
            </div>
          </div>

          <div class="handle">

            <div style="margin-left:16px; ">
              <i-switch v-model="obj.status==1"
                        true-color="#19BE6B" false-color="#ff4949"
                        size="large"
                        @on-change="lockChapter(obj)">
                <span slot="open">在用</span>
                <span slot="close">冻结</span>
              </i-switch>
            </div>

            <div @click.stop="delChapter(obj)" style="">
              <IconAli :sty="{width:'26px',height:'26px',margin:'5px 6px 0px 4px'}" icon='sub'></IconAli>
            </div>

            <div @click.stop="updateChapter(obj)">
              <IconAli :sty="{width:'26px',height:'26px',margin:'5px 30px 0px 4px'}" icon='edit'></IconAli>
            </div>
            <div @click.stop="orderCourse(obj)">
              <IconAli :sty="{width:'32px',height:'32px',margin:'3px 0px 0px 4px'}" icon='order-1'></IconAli>
            </div>
            <div @click.stop="addCourse(obj)">
              <IconAli :sty="{width:'26px',height:'26px',margin:'5px 10px 0px 4px'}" icon='add'></IconAli>
            </div>

          </div>
        </div>
        <div slot="content" style="margin: 0px 0px 0px 40px;">
          <!--课程具体信息-->
          <Collapse simple v-if="obj.courseDetailList.length!=0">
            <Panel :name="o.courseDetailId"
                   hide-arrow
                   v-for="(o,i) in obj.courseDetailList" :key="o.courseDetailId">

              <div class="course-header">
                <div style="display:flex">
                  <div :class="{'course-title':true,'del-style':o.status==0}">
                    {{ o.courseDetailName }}
                  </div>
                  <div style="margin-left: 30px;color: #F00;" v-if="o.status==0">
                    【当前课程已经下线】
                  </div>
                </div>
                <div class="course-handle">
                  <div style="margin-left:16px; ">
                    <i-switch v-model="o.status==1"
                              true-color="#19BE6B" false-color="#ff4949"
                              size="large"
                              @on-change="lockCourse(o)">
                      <span slot="open">在用</span>
                      <span slot="close">冻结</span>
                    </i-switch>
                  </div>

                  <div @click.stop="deleteCourse(o)" style="">
                    <IconAli :sty="{width:'26px',height:'26px',margin:'5px 6px 0px 4px'}" icon='sub'></IconAli>
                  </div>

                  <div @click.stop="updateCourse(o)">
                    <IconAli :sty="{width:'26px',height:'26px',margin:'5px 10px 0px 4px'}" icon='edit'></IconAli>
                  </div>
                </div>
              </div>
            </Panel>

          </Collapse>
        </div>
      </Panel>

    </Collapse>

    <!--添加章节-->
    <Modal
        v-model="addFlag"
        title="添加章节"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="addChapterOk">

      <el-form label-position="right" label-width="80px">

        <el-form-item label="章节名称">
          <el-input clearable
                    placeholder="请输入章节名称"
                    type="text"
                    v-model="chapterName"
                    maxlength="40"
                    show-word-limit></el-input>
        </el-form-item>


        <el-form-item label="章节简介">
          <Input
              clearble
              v-model="chapterDesc"
              maxlength="200"
              type="textarea"
              :autosize="{minRows: 3}"
              show-word-limit/>
        </el-form-item>

      </el-form>
    </Modal>

    <!--编辑章节-->
    <Modal
        v-model="updateFlag"
        title="编辑章节"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="updateChapterOk">

      <el-form label-position="right" label-width="80px">

        <el-form-item label="章节名称">
          <el-input clearable
                    placeholder="请输入章节名称"
                    type="text"
                    v-model="chapterName"
                    maxlength="40"
                    show-word-limit></el-input>
        </el-form-item>


        <el-form-item label="章节简介">
          <Input
              clearble
              v-model="chapterDesc"
              maxlength="200"
              type="textarea"
              :autosize="{minRows: 3}"
              show-word-limit/>
        </el-form-item>

      </el-form>
    </Modal>

    <!--章节排序-->
    <Modal
        v-model="orderChapterFlag"
        title="请排序"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="orderChapterOk">

      <Order :dataList="chapterOrderList" @my-event-order-list="getOrderChapterList"></Order>

    </Modal>

    <!--课程排序-->
    <Modal
        v-model="orderCourseFlag"
        title="请排序"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="orderCourseOk">

      <Order :dataList="courseOrderList" @my-event-order-list="getOrderCourseList"></Order>

    </Modal>

    <!--删除章节-->
    <Modal
        v-model="deleteChapterFlag"
        title="删除章节信息"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="deleteChapterOk">
      <template #header>
        <IconAli :sty="{width:'40px',height:'40px'}" icon='danger' style="margin:6px 0px 0px 16px"></IconAli>
      </template>

      <div style="display:flex;flex-direction:column;margin-left: 16px">
        <div class="delTip" style="font-size: 20px;font-weight: bold;color: #F00;">
          是否删除以下章节,此操作不可撤销,请谨慎操作!
        </div>
        <div class="nodeTip" style="margin-top: 6px;font-size: 16px;color: #000;font-weight: bolder;">
          {{ chapterName }}
        </div>
      </div>

    </Modal>

    <!--添加课程-->
    <Modal
        v-model="addCourseFlag"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="addCourseOk">
      <div slot="header">
        <div style="height:26px;line-height:26px;color: #F00;font-size: 18px">
          添加课程
        </div>
        <div style="height:26px;line-height:26px;font-size: 16px">
          隶属章节:
          <span style="color: #000;font-weight: bold">{{ chapterName }}</span>
        </div>
      </div>

      <el-form label-position="right" label-width="80px">

        <el-form-item label="课程名称">
          <el-input clearable
                    placeholder="请输入课程名称"
                    type="text"
                    v-model="courseDetailsName"
                    maxlength="40"
                    show-word-limit></el-input>
        </el-form-item>


        <el-form-item label="课程简介">
          <Input
              clearble
              v-model="courseDetailsDesc"
              placeholder="请输入课程简介"
              maxlength="200"
              type="textarea"
              :autosize="{minRows: 3}"
              show-word-limit/>
        </el-form-item>

        <el-form-item label="课程视频">
          <el-input clearable
                    placeholder="请输入视频URL"
                    type="text"
                    v-model="videoUrl"
                    maxlength="300"
                    show-word-limit></el-input>
          <div style="margin-top: 10px;display: flex">
            <!--视频-->
            <video :src="videoUrl"
                   v-if="videoUrl!=''"
                   width="300px"
                   height="186px"
                   controls
                   :auto-upload="false"
                   :on-change="uploadVideo"
                   autoplay></video>
            <!--上传-->
            <div v-if="videoUrl==''">

              <el-upload
                  :on-change="uploadVideo"
                  class="upload-demo"
                  drag
                  action="">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text"><em>点击上传或拖拽上传</em></div>
              </el-upload>
            </div>

            <div @click="removeVideo" v-if="videoUrl!=''">
              <IconAli :sty="{width:'36px',height:'36px'}" icon='del-red'></IconAli>
            </div>
          </div>
        </el-form-item>

      </el-form>
    </Modal>

    <!--删除課程-->
    <Modal
        v-model="deleteCourseFlag"
        title="删除课程"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="deleteCourseOk">
      <template #header>
        <IconAli :sty="{width:'40px',height:'40px'}" icon='danger' style="margin:6px 0px 0px 16px"></IconAli>
      </template>

      <div style="display:flex;flex-direction:column;margin-left: 16px">
        <div class="delTip" style="font-size: 20px;font-weight: bold;color: #F00;">
          是否删除以下课程,此操作不可撤销,请谨慎操作!
        </div>
        <div class="nodeTip" style="margin-top: 6px;font-size: 16px;color: #000;font-weight: bolder;">
          {{ courseDetailName }}
        </div>
      </div>

    </Modal>

    <!--课程抽屉-->
    <Drawer title="课程"
            :closable="false"
            width="70%"
            :draggable="true"
            :mask-closable="true"
            closable
            v-model="editCourseFlag">

      <div slot="header">
        课程:
        <span style="color:#F00">{{ courseDetailName }}</span>
      </div>
      <CourseDrawer :courseDetailId="courseDetailId" v-if="editCourseFlag"></CourseDrawer>
    </Drawer>

    <!--    <el-tree
            ref="tree"
            :data="data"
            :style="{width:'500px',display:'flex',flexDirection:'column',alignContent:'space-between'}"
            empty-text="此节点为空,请联系管理员"
            node-key="id"
            :render-after-expand="false"
            :render-content="renderContent"
            :highlight-current="true"
            :default-expand-all="true"
            :expand-on-click-node="false"
            :auto-expand-parent="true"
            :default-expanded-keys="openKeyArr"
            :default-checked-keys="checkKeyArr"
            :current-node-key="currentNodeKey"
            :show-checkbox="false"
            :filter-node-method="filterNode"
            :accordion="false"
            :indent=22
            icon-class=""
            draggable
            :allow-drag="allowDrag"
            :allow-drop="allowDrop"
            @node-click="nodeClick"
            @node-contextmenu="nodeContextMenu"
            @check-change="checkChange"
            @check="check"
            @current-change="currentChange"
            @node-expand="nodeExpand"
            @node-collapse="nodeCollapse"
            @node-drag-start="handleDragStart"
            @node-drag-enter="handleDragEnter"
            @node-drag-leave="handleDragLeave"
            @node-drag-over="handleDragOver"
            @node-drag-end="handleDragEnd"
            @node-drop="handleDrop">

        </el-tree>-->

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import Order from "@/views/common/Order"

import CourseDrawer from "@/components/course/CourseDrawer"

export default {
  //组件名称
  name: "Course",
  props: ["courseId"],
  //组件注册
  components: {
    IconAli, Order,
    CourseDrawer
  },
  //数据驱动
  data() {
    return {
      collapseChapterArr: [], //章节
      accordion: false, //手风琴模式
      openFlag: true,   //展开或收缩
      chapterList: [],  //章节列表

      chapterId: "",     //章节id
      chapterName: "",   //章节名称
      chapterDesc: "",   //章节描述

      addFlag: false,    //添加章节
      updateFlag: false,    //编辑章节
      orderChapterFlag: false, //章节排序
      deleteChapterFlag: false,  //章节删除
      chapterOrderList: [],    //章节排序数组
      chapterOrderIdList: [],    //排序之后的章节id

      addCourseFlag: false,    //添加课程

      courseDetailsId: "",   //课程id
      courseDetailsName: "", //课程细节名称
      courseDetailsDesc: "", //课程细节描述
      videoUrl: "",          //视频URL
      courseDetailsStatus: "", //状态

      editCourseFlag: false,   //更新课程
      deleteCourseFlag: false,   //删除课程

      courseDetailId: "",    //课程细节id
      courseDetailName: "",   //课程名称
      courseDetailDesc: "",  //课程简介
      courseDetailUrl: "",  //课程URL
      orderCourseFlag: false,    //课程排序
      courseOrderList: [],     //课程排序列表
      courseOrderIdList: [],    //排序之后的课程id
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {
    openFlag: function (newValue, oldValue) {
      if (newValue) {
        for (let i = 0; i < this.chapterList.length; i++) {
          this.collapseChapterArr.push(this.chapterList[i].chapterId)
        }
      } else {
        this.collapseChapterArr = []
      }
    }
  },
  //方法
  methods: {
    //展开或收缩
    openCloseChange() {
      this.openFlag = !this.openFlag;
    },
    //添加章节
    addChapter() {
      this.addFlag = true
      //置空
      this.chapterName = ""
      this.chapterDesc = ""
    },
    //添加章节确定
    addChapterOk() {
      let data = {
        courseId: this.courseId,
        chapterName: this.chapterName,
        chapterDesc: this.chapterDesc,
      }
      this.axios.post(`/course/chapter/chapter/${this.courseId}`, data)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('章节添加成功!');
          })
    },
    //章节排序
    orderChapter() {
      this.orderChapterFlag = true
      for (let i = 0; i < this.chapterList.length; i++) {
        let obj = this.chapterList[i];
        let tmp = {
          id: obj.chapterId,
          title: obj.chapterName
        }
        this.chapterOrderList.push(tmp);
      }
    },
    //章节排序
    getOrderChapterList(data) {
      this.chapterOrderIdList = data.idList
    },
    //章节排序确定
    orderChapterOk() {
      this.axios.put(`/course/chapter/chapter/order`, this.chapterOrderIdList)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('章节排序成功!');
          })
    },

    //更新章节
    updateChapter(obj) {
      this.updateFlag = true

      this.chapterId = obj.chapterId
      this.chapterName = obj.chapterName
      this.chapterDesc = obj.chapterDesc
    },
    //更新章节确定
    updateChapterOk(obj) {
      let data = {
        chapterId: this.chapterId,
        chapterName: this.chapterName,
        chapterDesc: this.chapterDesc,
      }
      this.axios.put(`/course/chapter/chapter/${this.chapterId}`, data)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('章节更新成功!');
          })
    },

    //删除章节
    delChapter(obj) {
      this.deleteChapterFlag = true
      this.chapterId = obj.chapterId
      this.chapterName = obj.chapterName
    },
    //删除章节确定
    deleteChapterOk() {
      this.axios.delete(`/course/chapter/chapter/${this.chapterId}`)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('章节删除成功!');
          })
    },
    //上线，下线章节
    lockChapter(obj) {
      event.stopPropagation();
      let status = obj.status;
      let newStatus = 1;
      if (status == 1) {
        newStatus = 0;
      }
      let data = {
        chapterId: obj.chapterId,
        status: newStatus
      }
      this.axios.put(`/course/chapter/chapter/${obj.chapterId}`, data)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('章节状态修改成功!');
          })
    },

    //重新上线
    reUpChapter(obj) {
      let data = {
        status: 1
      }
      this.axios.put(`/course/chapter/chapter/${obj.chapterId}`, data)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('章节已经上线成功!');
          })
    },

    //############################### 章节 ############################
    //课程排序
    orderCourse(obj) {
      this.orderCourseFlag = true

      let courseDetailList = obj.courseDetailList;

      for (let i = 0; i < courseDetailList.length; i++) {
        let obj = courseDetailList[i];
        let tmp = {
          id: obj.courseDetailId,
          title: obj.courseDetailName
        }
        this.courseOrderList.push(tmp);
      }
    },
    //获取排序列表
    getOrderCourseList(data) {
      this.courseOrderIdList = data.idList
    },
    //排序确定
    orderCourseOk() {
      this.axios.put(`/course/course-detail/order`, this.courseOrderIdList)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('课程排序成功!');
          })
    },
    //上传视频
    uploadVideo(file, fileList) {
      // this.myFileList = fileList

      //上传
      let formData = new FormData();
      formData.append("file", file.raw);

      this.axios.post(`/file/file/file`, formData)
          .then((data) => {
            let fileId = data.data
            this.axios.get(`/file/fileInfo/file/${data.data}`)
                .then((data) => {
                  this.videoUrl = data.data.url;
                })
          })
      return false;
    },
    removeVideo() {
      this.videoUrl = "";
    },
    //添加课程
    addCourse(obj) {
      this.addCourseFlag = true
      console.log(obj);
      this.chapterId = obj.chapterId
      this.chapterName = obj.chapterName
      this.courseDetailsName = ""
      this.courseDetailsDesc = ""
      this.videoUrl = ""
    },
    //添加课程成功
    addCourseOk() {
      let data = {
        chapterId: this.chapterId,
        courseDetailName: this.courseDetailsName,
        courseDetailsDesc: this.courseDetailsDesc,
        videoUrl: this.videoUrl
      }
      this.axios.post(`/course/course-detail/${this.chapterId}`, data)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('课程添加成功!');
          })
    },
    //删除课程
    deleteCourse(o) {
      this.deleteCourseFlag = true

      this.courseDetailId = o.courseDetailId
      this.courseDetailName = o.courseDetailName
      this.courseDetailDesc = o.courseDetailsDesc
      this.courseDetailUrl = o.videoUrl
    },
    //刪除课程确定
    deleteCourseOk() {
      this.axios.delete(`/course/course-detail/${this.courseDetailId}`)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('课程删除成功!');
          })
    },
    //锁定/解锁 课程
    lockCourse(o) {
      event.stopPropagation();
      this.courseDetailId = o.courseDetailId

      let status = o.status;
      let newStatus = 1;
      if (status == 1) {
        newStatus = 0;
      }
      let data = {
        courseDetailId: o.courseDetailId,
        status: newStatus
      }

      this.axios.put(`/course/course-detail/${this.courseDetailId}`, data)
          .then((data) => {
            this.selectChapterAndCourseDetailList();
            this.$Message.success('课程状态修改成功!');
          })
    },
    //修改课程
    updateCourse(o) {
      this.editCourseFlag = true

      this.courseDetailId = o.courseDetailId
      this.courseDetailName = o.courseDetailName
      this.courseDetailDesc = o.courseDetailsDesc
      this.videoUrl = o.videoUrl
    },
    //保存课程信息
    saveCourseDetail() {
      this.saveCourseFlag = false
      setTimeout(() => {
        this.$Message.success('课程保存成功!');
        this.saveCourseFlag = true
      }, 2000)
    },
    //请求章节列表
    selectChapterList() {
      this.axios.get(`/course/chapter/chapter/${this.courseId}`)
          .then((data) => {
            this.chapterList = data.data
            for (let i = 0; i < this.chapterList.length; i++) {
              this.collapseChapterArr.push(this.chapterList[i].chapterId)
            }
          })
    },
    //请求章节和课程列表
    selectChapterAndCourseDetailList() {
      this.axios.get(`/course/chapter/chapter/course-detail/${this.courseId}`)
          .then((data) => {
            this.chapterList = data.data
            for (let i = 0; i < this.chapterList.length; i++) {
              this.collapseChapterArr.push(this.chapterList[i].chapterId)
            }
          })
    },
    //请求课程列表
    selectCourseList() {

    },
  },
  //钩子函数
  mounted() {
    this.selectCourseList();
    this.selectChapterAndCourseDetailList();
  }
}
</script>

<style lang="less" scoped>
.course-container {
  .header-box {
    /*手风琴*/

    .sfq {
      height: 40px;
      padding-top: 4px;
    }

    /*展开收缩*/

    .open-box {
      height: 40px;
      padding-top: 4px;
      display: flex;

      .open, .close {
        //align-self: center;
        width: 30px;
        height: 30px;
        margin: -4px 0px 0px 0px;
      }

      .open {

      }

      .close {
        transform: rotate(-90deg);
      }

      /*展开收缩文字*/

      .o-text {
        align-self: center;
        font-size: 16px;
        margin-top: -14px;
      }
    }
  }

  /deep/ .ivu-collapse-header {
    .ivu-icon-ios-arrow-forward {
      width: 16px;
      height: 16px;
      margin-top: 12px;
      margin-left: 10px;
      //border:1px solid #000000;
    }

    display: flex;

    .chapter-header {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .title {
        margin-left: 6px;
        display: flex;

        .h-title {
          color: #000;
          font-weight: bold;
          margin-left: 6px;
          font-size: 16px;
        }
      }

      .handle {
        display: flex;
      }
    }
  }

  /deep/ .ivu-collapse-content-box .ivu-collapse-header {

    .course-header {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .course-title {
        color: #111;
      }

      .course-handle {
        display: flex;
      }
    }
  }
}

.del-style {
  color: #AAA !important;
}
</style>